<template>
  <div class="home web">
    <div class="cont">
      <el-row :gutter="24" class="card-row">
        <!-- 统计卡片 -->
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="card-header">
              <span>文件总数</span>
            </div>
            <div class="card-content">
              <div class="statistics" style="background-color:#ECF5FF;margin-bottom: 10px;">
                <div class="icon"></div>
                <div class="sum">
                  <h3></h3>
                </div>
              </div>
              <div style="display: flex;margin-bottom: 10px;">
                <div class="statistics" style="background-color: #FCF6EC;margin-right: 10px;"></div>
                <div class="statistics" style="background-color: #F0F9EB;"></div>
              </div>
              <span style="font-size: 12px;">文件所占空间1024T</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="card-header">
              <span>文件类型分布</span>
            </div>
            <div class="card-content">
              <div ref="chartRef" style="width: 100%; height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="stat-card">
            <div class="card-header">
              <span>本周文件数量</span>
            </div>
            <div class="card-content">
              <div ref="chartContainer" style="width: 100%; height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <!-- 数据表格 -->
        <el-col :span="16">
          <el-card class="data-card">
            <div class="card-header">
              <span>近期上传文件</span>
            </div>
            <div class="table-container cont-table">
              <el-table :data="tableData" border stripe max-height="330px" class="custom-table">
                <template v-for="(item, index) in tabHeading">
                  <el-table-column :prop="item.prop" :label="item.label" :width="item.width" :min-width="item.minWidth">
                    <!-- 根据文件类型匹配图标 -->
                    <template #default="{ row }" v-if="item.prop === 'type'">
                      <span style="margin-right: 10px;">
                        <svg class="icon" aria-hidden="true" v-if="fileType.find(t => t.type === row.type)">
                          <use :xlink:href="fileType.find(t => t.type === row.type).iconName"></use>
                        </svg>
                      </span>
                      <span>{{ row[item.prop] }}</span> <!-- 文字备用 -->
                    </template>
                  </el-table-column>
                </template>
                <el-table-column fixed="right" label="操作" min-width="120">
                  <template #default="{ row }">
                    <el-button link type="primary" size="small">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>

        <!-- 状态卡片 -->
        <el-col :span="8" class="status-card-col">
          <el-card class="status-card">
            <div class="card-header">
              <span>文件实时状态</span>
            </div>
            <div class="card-content">
              <p v-for="o in 4" :key="o">{{ 'List item ' + o }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
const chartRef = ref(null);
const chartContainer = ref(null);
const fileTypes = [
  { name: 'WORD', value: 1773, percentage: '40%' },
  { name: 'DOC', value: 200 },
  { name: 'XLSX', value: 701 },
  { name: 'PDF', value: 701 },
  { name: 'ZIP', value: 529 },
  { name: 'RAR', value: 529 }
];
// 图表数据
const chartData = {
  xAxisData: ['一', '二', '三', '四', '五', '六', '日'],
  downloadData: [500, 400, 600, 800, 700, 750, 900],
  uploadData: [350, 300, 500, 600, 600, 700, 800]
};
// 表头
const tabHeading = ref([
  { prop: "num", label: "文件名", width: "", minWidth: "", },
  { prop: "name", label: "文件大小", width: "", minWidth: "", },
  { prop: "type", label: "文件类型", width: "", minWidth: "", },
  { prop: "money", label: "上传用户", width: "", minWidth: "", },
  { prop: "payment", label: "上传时间", width: "", minWidth: "", },
])
// 文件类型
const fileType = ref([
  { type: 'colour', iconName: '#icon-file2_colour' },
  { type: 'doc', iconName: '#icon-word' },
  { type: 'docx', iconName: '#icon-word' },
  { type: 'xls', iconName: '#icon-EXCEL' },
  { type: 'xlsx', iconName: '#icon-EXCEL' },
  { type: 'pdf', iconName: '#icon-PDF' },
  { type: 'zip', iconName: '#icon-ZIP' },
  { type: 'rar', iconName: '#icon-RAR' },
  { type: 'txt', iconName: '#icon-TXT' },
  { type: 'jpg', iconName: '#icon-PICTURE' },
  { type: 'png', iconName: '#icon-PICTURE' },
  { type: 'video', iconName: '#icon-VIDEO' },
  { type: 'audio', iconName: '#icon-AUDIO' },
])
// 列表数据
const tableData = ref(Array.from({ length: 14 }, (_, i) => ({
  num: `文件${i + 1}`,
  name: `${Math.floor(Math.random() * 100)}MB`,
  money: `用户${i % 10 + 1}`,
  payment: new Date().toLocaleString(),
  type: fileType.value[Math.floor(Math.random() * fileType.value.length)].type
})))

onMounted(() => {
  const chart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: ({ name, value }) => `${name}<br/>数量：${value}`
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
      itemGap: 20,
      // itemStyle: {
      //   color: '#333'
      // }
    },
    series: [
      {
        name: '文件数量',
        type: 'pie',
        radius: ['25%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: ({ name, percent, value }) => {
            return `${name}\n{num|${value}}`;
          },
          rich: {
            num: {
              fontSize: 12
            }
          }
        },
        labelLine: {
          show: true
        },
        data: fileTypes
      }
    ],
    color: ['#188DF0', '#666', '#16CCA5', '#2D3A62', '#FFC107', '#FF5722'] // 对应的颜色
  };

  chart.setOption(option);
  initChart()
})
// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return;

  const chart = echarts.init(chartContainer.value);

  const option = {
    title: {
      // text: '每日文件上传下载量',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      top: 30,
      data: ['下载数', '上传数'],
      textStyle: {
        color: '#666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: chartData.xAxisData,
      axisLabel: {
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1000,
      interval: 200,
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#eee'
        }
      }
    },
    series: [
      {
        name: '下载数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#409eff' // 蓝色
        },
        data: chartData.downloadData
      },
      {
        name: '上传数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#52c41a' // 绿色
        },
        data: chartData.uploadData
      }
    ]
  };

  chart.setOption(option);
}
</script>

<style lang="less" scoped>
@import "@/assets/scss/web.scss";

.home {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .cont {
    flex: 1;
    padding: 20px;
    overflow: auto;
    flex-direction: column;

    .card-row {
      margin-bottom: 20px;
    }
  }
}

.stat-card,
.data-card,
.status-card {
  height: 100%;
  box-sizing: border-box;

  .card-header {
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
  }

  .card-content {
    flex: 1;
    overflow: auto;

    .statistics {
      width: 100%;
      height: 120px;
    }
  }
}

.stat-card {
  height: 380px;
}

.data-card {
  .table-container {
    flex: 1;
    overflow: auto;
  }

  .custom-table {
    width: 100%;
    overflow: auto;
  }
}
</style>